<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/style/style.css">
<script src="${pageContext.request.contextPath}/static/script/index.js"></script>
<script src="${pageContext.request.contextPath}/static/script/button.js"></script>
<title>BookStore - ${book.title}</title>
</head>
<body>
	<nav class="aho-top-bar aho-box-shadow-mid">
		<section class="main">
			<span><a href="${pageContext.request.contextPath}">OnlineBookStore</a></span>
		</section>
		<section class="toolbar">
			<form action="search" method="GET" class="search-bar">
				<input type="text" placeholder="搜索图书" id="search-content" name="q" />
				<div id="search-btn" class="search-button">
					<svg style="width: 20px; height: 20px;" fill="none"
						stroke="currentColor" viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round"
							stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
				</div>
			</form>
		</section>
		<section class="toolbar">
			<c:if test="${account == null}">
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/login"> 登录 </a>
			</c:if>
			<c:if test="${account != null}">
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/profile">
					<svg style="width: 24px; height: 24px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					  <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
					</svg>
				</a>
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/shopping-cart"> <svg
						style="width: 24px; height: 24px;" fill="none"
						stroke="currentColor" viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round"
							stroke-width="2"
							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
				</a>
				<a href="${pageContext.request.contextPath}/logout"
					class="toolbar-action"> <span
					class="aho-icon aho-icon-logout"></span>
				</a>
			</c:if>
		</section>

	</nav>
	<main class="center big-width flex-page flex-column">
		<div class="item-card">
			<div class="side-img">
				<img
					src="${pageContext.request.contextPath}/static/imgs/${book.id}.png">
			</div>
			<div class="item-detail">
				<h3>${book.title}</h3>
				<p>${book.author}著</p>
				<p>${book.publisher}</p>
				<p>
					价格： <span class="price">${book.price}</span> (人民币)
				</p>
				<p>库存： ${book.stock}</p>
				<hr>
				<form id="add-form"
					action="${pageContext.request.contextPath}/shopping-cart"
					method="POST">
					<input type="hidden" name="userId" value="${account.id}" /> <input
						type="hidden" name="bookId" value="${book.id}" /> <input
						type="hidden" name="redirect" value="" />

					<div class="item-actions">
						<input type="number" name="amount" min="1" value="1"
							max="${book.stock} }" />
						<button class="bt">
							<div class="wave" style="left: auto;"></div>
							<div class="text">加入购物车</div>
						</button>
						<button class="bt">
							<div class="wave" style="left: auto;"></div>
							<div class="text" id="buynow" data-id="${book.id}">立即购买</div>
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="detail">
			<div class="detail-header">
				<div class="detail-header-item">
					<span>图书介绍</span>
				</div>
			</div>
			<div class="description">${book.description}</div>
		</div>
	</main>
	<script>
    		<c:if test="${account == null}">
    		var _userId = '';
    		</c:if>
    		<c:if test="${account != null}">
    		var _userId = "${account.id}";
    		</c:if>
     		var btnSearch = document.getElementById("search-btn");
     		var inputContent = document.getElementById("search-content");
     		btnSearch.addEventListener("click", function(e) {
     			if (inputContent.value == '') {
     				return;
     			}
     			window.open("${pageContext.request.contextPath}/search?q=" + encodeURI(inputContent.value), "_self");
     		});
     		var btnBuyNow = document.getElementById("buynow");
     		var addForm = document.getElementById("add-form");
     		btnBuyNow.addEventListener("click", function(e) {
     			let bookId = btnBuyNow.getAttribute("data-id");
     			if (_userId === '') {
     				console.log("需要登录");
     				return;
     			}
     			addForm.submit();
     		});	
     		
     		
    </script>
</body>
</html>